import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

import '../../core/models/topic_model.dart';
import '../../core/providers/topic_provider.dart';

class TopicListScreen extends ConsumerStatefulWidget {
  const TopicListScreen({super.key});

  @override
  ConsumerState<TopicListScreen> createState() => _TopicListScreenState();
}

class _TopicListScreenState extends ConsumerState<TopicListScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/resources/common_bg_2.png'),
            fit: BoxFit.cover,
          ),
        ),
        child: SafeArea(top: false, bottom: false, child: _buildMainContent()),
      ),
    );
  }

  Widget _buildMainContent() {
    return [
      SizedBox(height: 36.h),
      _buildTopNavigationBar(),
      SizedBox(height: 20.h),
      _buildTopicListContainer(),
    ].toColumn().padding(horizontal: 16.w, vertical: 20.h);
  }

  Widget _buildTopNavigationBar() {
    return [
      Container(
        width: 30.w,
        height: 30.w,
        decoration: BoxDecoration(color: Colors.black, shape: BoxShape.circle),
        child:
            Icon(
              Icons.arrow_back_ios_new,
            ).iconSize(20.sp).iconColor(Colors.white).center(),
      ).inkWell(onTap: () => GoRouter.of(context).pop()),
      Expanded(
        child: Text(
          'Spring Outing Topics',
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 24.sp,
            fontWeight: FontWeight.bold,
            color: Colors.black,
            fontFamily: 'PoetsenOne',
          ),
        ),
      ),
      SizedBox(width: 16.w),
    ].toRow();
  }

  Widget _buildTopicListContainer() {
    final topics = ref.watch(outingTopicProvider);

    return Expanded(
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 0.w),
        child: Stack(
          clipBehavior: Clip.none,
          children: [
            Container(
              padding: EdgeInsets.only(top: 50.h),
              width: double.infinity,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/resources/topic_bg.png'),
                  fit: BoxFit.fill,
                ),
              ),
            ),
            Positioned(
              top: -80.h,
              left: -120.w,
              right: 0,
              child: Image.asset(
                'assets/resources/topic_cheer.png',
                fit: BoxFit.contain,
                height: 256.h,
              ),
            ),
            Container(
              padding: EdgeInsets.only(top: 50.h, bottom: 20.h),
              child: _buildTopicList(topics),
            ),
            Positioned(
              top: 0.h,
              right: 0.w,
              child: Container(
                width: 156.w,
                height: 48.h,
                decoration: BoxDecoration(
                  color: Colors.transparent,
                  borderRadius: BorderRadius.circular(24.r),
                  border: Border.all(color: Colors.transparent, width: 2),
                ),
              ).inkWell(onTap: _handleCreateTopic),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTopicList(List<dynamic> topics) {
    if (topics.isEmpty) {
      return Text(
        'No topics available',
      ).fontSize(16.sp).textColor(Colors.grey).center();
    }

    return ListView.builder(
      padding: EdgeInsets.all(16.w),
      itemCount: topics.length,
      itemBuilder: (context, index) {
        final topic = topics[index];
        return _buildTopicItem(topic, index);
      },
    );
  }

  Widget _buildTopicItem(dynamic topic, int index) {
    final isOdd = (index + 1) % 2 == 1;
    final backgroundImage =
        isOdd
            ? 'assets/resources/topic_card_bg_1.png'
            : 'assets/resources/topic_card_bg_2.png';

    return Container(
      height: 94.h,
      margin: EdgeInsets.only(bottom: 12.h),
      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(backgroundImage),
          fit: BoxFit.fill,
        ),
      ),
      child: [
        Container(
          width: 54.w,
          height: 54.w,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Color(0xFF2AB061),
          ),
          child:
              Image.asset(
                'assets/resources/topic_icon.png',
                width: 28.w,
                height: 28.w,
              ).center(),
        ),
        SizedBox(width: 16.w),
        Expanded(
          child: Text(
            topic.description,
            style: TextStyle(
              fontSize: 14.sp,
              fontWeight: FontWeight.w600,
              color: Colors.black,
            ),
            maxLines: 3,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ].toRow(crossAxisAlignment: CrossAxisAlignment.center),
    ).inkWell(onTap: () => _handleTopicTap(topic));
  }

  void _handleTopicTap(OutingTopicEntity topic) {
    GoRouter.of(context).push('/topic-detail/${topic.topicId}');
  }

  void _handleCreateTopic() {
    GoRouter.of(context).push('/create-topic');
  }
}
